<template>
    <el-row class="purchase">
        <el-row>
            <SelectCondition @setCondition="setCondition" />
        </el-row>
        <el-row>
            <DataTable :data-list="dataTable" v-if="showTable.show" @showJournalList="showJournalList" />
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-pagination :total="pageInfo.total" background layout="sizes, prev, pager, next"
                :page-size="pageInfo.pageSize" :current-page="pageInfo.pageIndex" :page-sizes="[1, 10, 20, 30, 40]"
                @size-change="pageSizeChange" @current-change="selectData" style="float: right;"></el-pagination>
        </el-row>
        <el-row>
            <el-dialog :visible.sync="journalTable.show" title="会计分录信息">
                <JournalTable :data-list="journalTable.dataList" />
            </el-dialog>
        </el-row>
    </el-row>
</template>

<script setup lang="ts">
import { timeFormat } from "@/utils/time"
import { onMounted, ref } from "vue";
import { PageResult, SimpleResult, QueryParams, JournalEntry } from "@/requests/request";
import { queryPage, queryJournalEntriesByBusinessId } from "@/requests/api/purchase-receipt";


import SelectCondition from '@/views/purchase-receipt/SelectCondition.vue';
import DataTable from '@/views/purchase-receipt/DataTable.vue';
import JournalTable from "@/views/purchase-receipt/JournalTable.vue";
import { Message } from "element-ui";

onMounted(() => {
    selectData();
})
let pageInfo = ref({
    pageIndex: 1,
    pageSize: 10,
    total: 0
});
let dataTable = ref([]);
let showTable = ref({ show: true });
let queryParams: QueryParams = ref({
    pageIndex: 1,
    pageSize: 10,
    condition: {
        transactionType: '',
        org: '',
        startTime: '',
        endTime: '',
    }
})
const selectData = async (v?: number) => {
    if (v) {
        pageInfo.value.pageIndex = v
    }
    queryParams.value.pageIndex = pageInfo.value.pageIndex;
    queryParams.value.pageSize = pageInfo.value.pageSize;
    let res: PageResult = await queryPage(queryParams.value);
    console.log('数据', res.data)
    if (res && res.data) {
        const { records, count, pageIndex, pageSize } = res.data
        dataTable.value = records;
        pageInfo.value.total = parseInt(count);
        pageInfo.value.pageIndex = parseInt(pageIndex);
        pageInfo.value.pageSize = parseInt(pageSize);
    } else {
        Message.error("数据获取失败!")
    }
}

//设置条件值
const setCondition = (selectCondition: SelectCondition) => {

    if (queryParams.value.condition) {
        queryParams.value.condition.org = selectCondition.org;
        queryParams.value.condition.transactionType = selectCondition.transactionType;
        queryParams.value.condition.startTime = '';
        queryParams.value.condition.endTime = '';
        if (selectCondition.dateTimes && selectCondition.dateTimes.length > 0) {
            queryParams.value.condition.startTime = timeFormat(selectCondition.dateTimes[0]);
            queryParams.value.condition.endTime = timeFormat(selectCondition.dateTimes[1]);
        }
    }
    selectData();
}

const pageSizeChange = (v: number) => {
    console.log('条数', v)
    pageInfo.value.pageSize = v
    pageInfo.value.pageIndex = 1;
    selectData();
}

let journalTable = ref({
    dataList: [],
    show: false
});
const showJournalList = async (businessId: string) => {
    console.log('子组件事件', typeof (businessId))
    journalTable.value.dataList = [];
    let journalEntryResult: SimpleResult<Array<JournalEntry>> = await queryJournalEntriesByBusinessId(businessId);
    journalTable.value.dataList = journalEntryResult.data;
    journalTable.value.show = true;
}
</script>

<style lang="scss" scoped>
.purchase {
    padding: 10px;
    // width: 100%;
}
</style>